<template>
  <section>
    <span>这个将不会改变：{{msg}}</span>
    <p>输出：{{rowHtml}}</p>
    <p>
      输出：
      <span v-html="rowHtml"></span>
    </p>
    <div v-bind:id="dynamicId"></div>
    <button v-bind:disabled="isButtonDisabled">按钮</button>
    <div>表达式：{{number+1}}</div>
    <div>表达式：{{ok?'是':'否'}}</div>
    <div>表达式：{{message.split('').reverse().join('')}}</div>
    <div v-bind:id="'list-'+id">{{id}}</div>
    <!-- 这是语句，不是表达式 -->
    <!-- {{let a=1}} -->
    <!-- 流控制也不会生效，请使用三元表达式 -->
    <!-- {{ if (ok) { return message } }} -->
    <div>表达式限制：单个表达式</div>
  </section>
</template>

<script>
export default {
  name: "BindingSyntax",
  data() {
    return {
      msg: "这是消息文本",
      rowHtml: '<span style="color: red">这个应该是红色的</span>',
      dynamicId: 9001,
      isButtonDisabled: false,
      number: 2,
      ok: true,
      message: "这是一串消息",
      id: 869
    };
  }
};
</script>